<!-- 在线留言 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
    <title>在线留言</title>
    <link href="../../layui/css/layui.css" rel="stylesheet">
    <!-- 样式 -->
    <link href="../../css/style.css" rel="stylesheet"/>
    <!-- 主题（主要颜色设置） -->
    <link href="../../css/theme.css" rel="stylesheet"/>
    <!-- 通用的css -->
    <link href="../../css/common.css" rel="stylesheet"/>
</head>
<style>
    #swiper {
        overflow: hidden;
    }

    #swiper .layui-carousel-ind li {
        width: 50px;
        height: 1px;
        border-width: 0;
        border-style: solid;
        border-color: rgba(1, 1, 1, 0.3);
        border-radius: 30px;
        background-color: rgba(255, 0, 0, 1);
        box-shadow: 0 0 0px rgba(255, 0, 0, .8);
    }

    #swiper .layui-carousel-ind li.layui-this {
        width: 50px;
        height: 10px;
        border-width: 0;
        border-style: solid;
        border-color: rgba(0, 0, 0, 0.3);
        border-radius: 50px;
        background-color: rgba(0, 112, 126, 1);
        box-shadow: 0 0 0px rgba(15, 98, 108);
    }

    .index-title {
        text-align: center;
        box-sizing: border-box;
        width: 980px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .layui-laypage .layui-laypage-count {
        padding: 0 10px;
    }

    .layui-laypage .layui-laypage-skip {
        padding-left: 10px;
    }
</style>
<body>

<div id="app">
    <!-- 轮播图 -->
    <!-- <div class="layui-carousel" id="swiper">
        <div carousel-item id="swiper-item">
            <div v-for="(item,index) in swiperList" v-bind:key="index">
                <img class="swiper-item" :src="item.img">
            </div>
        </div>
    </div> -->
    <div :style='{"boxShadow":"0 0 6px rgba(15,98,108)","margin":"0 auto","borderColor":"rgba(0,0,0,.3)","borderRadius":"0px","borderWidth":"0","width":"100%","borderStyle":"solid"}' class="layui-carousel"
         id="swiper">
        <div carousel-item id="swiper-item">
            <div :key="index" v-for="(item,index) in swiperList">
                <img :src="item.img" style="width: 100%;height: 100%;object-fit:cover;"/>
            </div>
        </div>
    </div>
    <!-- 轮播图 -->

    <!-- 标题 -->
    <!-- <h2 class="index-title">MESSAGES / ADVICE</h2>
    <div class="line-container">
        <p class="line"> 留言反馈 </p>
    </div> -->
    <div :style='{"padding":"10px","boxShadow":"10px 8px 6px rgba(0, 112, 126, 1)","margin":"10px auto","borderColor":"rgba(38, 155, 158, 1)","backgroundColor":"rgba(255, 255, 255, 1)","color":"rgba(0, 112, 126, 1)","borderRadius":"4px","borderWidth":"1px","fontSize":"20px","borderStyle":"solid","height":"auto"}'
         class="index-title">
        <span>MESSAGES / ADVICE</span><span>留言反馈</span>
    </div>
    <!-- 标题 -->

    <div class="message-container" style="padding: 20px 0;">
        <form :style='{"padding":"20px","boxShadow":"0 0 6px rgba(51, 140, 145, 1)","margin":"0 0 20px 0","borderColor":"rgba(255,0,0,.3)","backgroundColor":"#fff","borderRadius":"4px","borderWidth":"0","borderStyle":"solid"}'
              class="layui-form message-form">
            <div class="layui-form-item layui-form-text" style="display: flex;align-items: center;margin:0">
                <label :style='{"padding":"0","minWidth":"54px","fontSize":"14px","color":"#333","textAlign":"center"}' class="layui-form-label"
                       style="width: auto;">留言</label>
                <div class="layui-input-block" style="margin:0;flex:1;">
                    <textarea
                            :style='{"padding":"10px","boxShadow":"0 0 6px rgba(0, 112, 126, 1)","borderColor":"rgba(0,0,0,.3)","backgroundColor":"#fff","color":"#333","borderRadius":"4px","borderWidth":"0","fontSize":"14px","borderStyle":"solid","height":"120px"}'
                            class="layui-textarea" lay-verify="required" name="content" placeholder="请输入内容"
                            required></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button :style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.3)","margin":"10px 5px 0","borderColor":"rgba(0,0,0,.3)","backgroundColor":"rgba(38, 155, 158, 1)","color":"#fff","borderRadius":"4px","borderWidth":"0","width":"auto","lineHeight":"34px","fontSize":"14px","borderStyle":"solid"}'
                            class="layui-btn btn-submit" lay-filter="*" lay-submit>立即提交
                    </button>
                    <button :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(0, 112, 126, 1)","margin":"10px 5px 0","borderColor":"rgba(0,0,0,.3)","backgroundColor":"#fff","color":"rgba(0, 112, 126, 1)","borderRadius":"4px","borderWidth":"0","width":"auto","lineHeight":"34px","fontSize":"14px","borderStyle":"solid"}'
                            class="layui-btn layui-btn-primary" type="reset">重置
                    </button>
                </div>
            </div>
        </form>
        <div :style='{"padding":"0 20px 20px","boxShadow":"0 0 0px rgba(255,0,0,.3)","margin":"0","borderColor":"rgba(18, 18, 18, 0.3)","backgroundColor":"#fff","borderRadius":"4px","borderWidth":"0","borderStyle":"solid"}' class="message-list"
             v-if="dataList.length">
            <div :style='{"padding":"20px 0","boxShadow":"0 0 6px rgba(51, 140, 145, 1)","margin":"0","borderColor":"rgba(0,0,0,.3)","backgroundColor":"#fff","borderRadius":"0","borderWidth":"0 0 1px 0","borderStyle":"solid"}'
                 class="message-item" v-bind:key="index" v-for="(item,index) in dataList">
                <div class="username-container" style="display: flex;align-items: center;">
                    <img :style='{"boxShadow":"0 0 6px rgba(255,0,0,.3)","margin":"0 10px 0 0","borderColor":"rgba(0,0,0,.3)","borderRadius":"100%","borderWidth":"0","width":"40px","borderStyle":"solid","height":"40px"}'
                         class="avator" src="../../img/avator.png">
                    <span :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(51, 140, 145, 1)","margin":"0","borderColor":"rgba(0,0,0,.3)","backgroundColor":"#fff","color":"#333","borderRadius":"4px","borderWidth":"0","width":"auto","lineHeight":"28px","fontSize":"14px","borderStyle":"solid"}'
                          class="username"
                          style="display: inline-block;">用户：{{item.username}}</span>
                </div>
                <div class="content" class="content" style="margin: 0;flex: 1;">
							<span :style='{"padding":"8px","boxShadow":"0 0 0px rgba(255,0,0,.3)","margin":"8px 0 0 50px","borderColor":"rgba(0,0,0,.3)","backgroundColor":"rgba(38, 155, 158, 1)","color":"#fff","borderRadius":"4px","borderWidth":"0","fontSize":"14px","borderStyle":"solid"}'
                                  class="message"
                                  style="display: inline-block;">
								{{item.content}}
							</span>
                </div>
                <div class="replay" style="margin: 0;flex: 1;background: transparent;padding: 0;" v-if="item.reply">
                    <span :style='{"padding":"8px","boxShadow":"0 0 0px rgba(255,0,0,.3)","margin":"8px 0 0 50px","borderColor":"rgba(0,0,0,.3)","backgroundColor":"rgba(38, 155, 158, 1)","color":"#fff","borderRadius":"4px","borderWidth":"0","fontSize":"14px","borderStyle":"solid"}'
                          class="label"
                          style="display: inline-block;">回复：{{item.reply}}</span>
                    <!-- <span class="message">
                        {{item.reply}}
                    </span> -->
                </div>
            </div>
        </div>
        <div :style="{textAlign:2==1?'left':2==2?'center':'right'}" class="pager" id="pager"></div>
    </div>
</div>

<!-- layui -->
<script src="../../layui/layui.js"></script>
<!-- vue -->
<script src="../../js/vue.js"></script>
<!-- 组件配置信息 -->
<script src="../../js/config.js"></script>
<!-- 扩展插件配置信息 -->
<script src="../../modules/config.js"></script>
<!-- 工具方法 -->
<script src="../../js/utils.js"></script>

<script>
    var vue = new Vue({
        el: '#app',
        data: {
            // 轮播图
            swiperList: [{
                img: '../../img/banner.jpg'
            }],
            dataList: []
        },
        filters: {
            newsDesc: function (val) {
                if (val) {
                    if (val.length > 200) {
                        return val.substring(0, 200).replace(/<[^>]*>/g).replace(/undefined/g, '');
                    } else {
                        return val.replace(/<[^>]*>/g).replace(/undefined/g, '');
                    }
                }
                return '';
            }
        },
        methods: {
            jump(url) {
                jump(url)
            }
        }
    })

    layui.use(['layer', 'element', 'carousel', 'laypage', 'http', 'jquery', 'form'], function () {
        var layer = layui.layer;
        var element = layui.element;
        var carousel = layui.carousel;
        var laypage = layui.laypage;
        var http = layui.http;
        var form = layui.form;
        var jquery = layui.jquery;

        var limit = 5;

        // 获取轮播图 数据
        http.request('config/list', 'get', {
            page: 1,
            limit: 5
        }, function (res) {
            if (res.data.list.length > 0) {
                var swiperItemHtml = '';
                for (let item of res.data.list) {
                    if (item.name.indexOf('picture') >= 0 && item.value && item.value != "" && item.value != null) {
                        swiperItemHtml +=
                            '<div>' +
                            '<img class="swiper-item" style="width: 100%;height: 100%;object-fit:cover;" src="' + item.value + '">' +
                            '</div>';
                    }
                }
                jquery('#swiper-item').html(swiperItemHtml);
                // 轮播图
                // carousel.render({
                // 	elem: '#swiper',
                // 	width: swiper.width,height:swiper.height,
                // 	arrow: swiper.arrow,
                // 	anim: swiper.anim,
                // 	interval: swiper.interval,
                // 	indicator: swiper.indicator
                // });
                vue.$nextTick(() => {
                    carousel.render({
                        elem: '#swiper',
                        width: '100%',
                        height: '400px',
                        arrow: 'hover',
                        anim: 'fade',
                        autoplay: 'true',
                        interval: '3000',
                        indicator: 'inside'
                    });

                })
            }
        });

        // 获取列表数据
        init();

        function init() {
            // 获取列表数据
            http.request('messages/list', 'get', {
                page: 1,
                limit: limit
            }, function (res) {
                vue.dataList = res.data.list
                // 分页
                laypage.render({
                    elem: 'pager',
                    count: res.data.total,
                    limit: limit,
                    groups: 4,
                    layout: ["prev", "page", "next"],
                    theme: '#009688',
                    jump: function (obj, first) {
                        //首次不执行
                        if (!first) {
                            http.request('messages/list', 'get', {
                                page: obj.curr,
                                limit: obj.limit
                            }, function (res) {
                                vue.dataList = res.data.list
                            })
                        }
                    }
                });
            })
        }

        // 提交数据
        form.on('submit(*)', function (data) {
            data = data.field;
            data.userid = localStorage.getItem('userid')
            data.username = localStorage.getItem('adminName')
            http.requestJson('messages/add', 'post', data, function (res) {
                layer.msg('留言成功', {
                    time: 2000,
                    icon: 6
                }, function () {
                    window.location.reload();
                });
                return false
            });
            return false
        });

    });
</script>
</body>
</html>
